<!DOCTYPE html>
<html xmlns:url="http://www.w3.org/1999/xhtml">
<head>
    <title>YOLO_Studio</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 当页面加载完成后执行以下代码
        $(document).ready(  function() {
            // 监听表单提交事件
            $('#exportForm').submit(function(event) {
                event.preventDefault();

                // 获取用户输入的值
                var projectID = $('#projectID').val();
                //var token = $('#token').val();
               // var filePath = $('#filePath').val();
                var fileName = $('#fileName').val();


                // 发送POST请求到后端的Python脚本
               // $.post('/export', { projectID: projectID, token: token, filePath: filePath ,fileName:fileName })
                $.post('/export', { projectID: projectID, fileName:fileName })
                    .done(function(data) {
                        // 显示成功消息
                        $('#result').text(data);
                    })
                    .fail(function() {
                        // 显示错误消息
                        $('#result').text('Error exporting JSON content.');
                    });
            });
        });
    </script>
</head>
<body>
    <h1>访问LabelStudio下载image</h1>
    <form id="exportForm">
        <label for="projectID">模型ID：</label>
        <input type="text" id="projectID" required><br>

    <!--    <label for="token">令牌：</label>
        <input type="text" id="token" required><br>-->

        <!--<label for="filePath">文件路径：</label>
        <input type="text" id="filePath" required>-->

        <label for="fileName">模型命名：</label>
        <input type="text" id="fileName" required><br>

        <button type="submit">导出模型image.zip</button>
    </form>

    <div id="result"></div>



    <!-- 新添模型识别 -->

    <h2 id="title">Train_System</h2>
    <br />
    <br />
    <img id="imageDisplay" width="500" height="500" />
    <img id="result_show" src="data:;base64,{{ img_stream }}">
    <br />
    <form method="POST" enctype="multipart/form-data">
      <br />
     <input type="file" id="imageFile" onchange=displayImage() >
        <input type="file" name="file">
        <br />
        <input id=button_detect  type="submit" value="开始检测">
<!--        <input id=button_train  type="button" value="开始训练"-->
<!--            onclick=function train(){-->
<!--                $.ajax({-->
<!--                    url: '/train',-->
<!--                    type:'POST',-->
<!--                    success:function(response){-->
<!--                        alert('训练进行中，请勿乱动,内存占用过高将导致训练失败！');-->
<!--                    }-->
<!--                })-->
<!--            }-->
<!--        >-->




    </form>

    <form action="/train" method="post">
        <button type="submit">Train</button>
    </form>
    <br />
    <div id="imagePath"></div>
    <script>
        function displayImage() {
            var fileInput = document.getElementById("imageFile");
            var imagePath = document.getElementById("imagePath");
            var imageDisplay = document.getElementById("imageDisplay");
            var file = fileInput.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
              //imagePath.innerHTML = "Image Path: " + fileInput.value;
              imageDisplay.src = e.target.result;
            };
      }
      function Show() {
              var img = document.getElementById('img');
              img.src = '/sh';
          }
    </script>
      <!-- <button id="my-button" onclick="Detect()">检测</button> -->
      <a href="http://127.0.0.1:5000/sh">
          <button id="button_show" onclick="Show()">显示图片</button>
      </a>
      
</body>



<!-- 目标检测系统的style -->

<style>
    #title{
    text-align: center; 
    color: black;
    font-size: xx-large;
    background-color: cadetblue;
}
    #imageDisplay{
        margin-left: 350px;
        position: relative;
    }
    #button_detect{
      width: 100px;
      height: 40px;
      background-color: skyblue;
      font-size: larger;
      margin-left: 900px;
      margin-top: auto;
    }
    #button_show{
      width: 100px;
      height: 40px;
      background-color: skyblue;
      font-size: larger;
      margin-left:900px;
      margin-top: auto;
    }
    #imageFile{
      width: 300px;
      height: 40px;
      background-color:white;
      font-size: larger;
      margin-left:900px;
      margin-top: auto;
    }
    #result_show{
      height: 500px;
      width: 500px;
      margin-left: 200px;
      
    }
  </style>
</html>